<template>
    <div>
        <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div v-for="item in cartData">

            <van-swipe-cell>
                <van-card num="2" :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="display: flex;">
                            <van-checkbox v-model="item.checked">复选框</van-checkbox>
                            <img :src="item.goods.goods_small_logo" alt="" style="width: 70px;">
                        </div>

                    </template>
                    <template #number>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                    </template>

                </van-card>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)" />
                </template>
            </van-swipe-cell>
        </div>


    </div>
</template>

<script setup>
import router from '@/router';
import { ref } from 'vue';
let cartData = ref([])
import { useCounterStore } from '@/stores/cart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
const onClickLeft = () => {
    router.push('/')
}
console.log(store.piniaCart);

let cart = () => {
    cartData.value = store.piniaCart
}
cart()
const del=(id)=>{
store.piniaCart=store.piniaCart.filter(item=>item.id!=id)
cart()
}
</script>

<style lang="scss" scoped></style>